useThrottle 節流是什麼

節流（Throttling）是一種在高頻事件觸發時，降低事件處理函數執行頻率的技術，通常用於優化性能，節流可以幫助以下四點：

1. 避免資源濫用
   某些事件，如滾動、鼠標移動、鍵盤輸入、窗口調整等，可以非常快速地連續觸發，這可能導致大量的計算和資源消耗。通過節流，您可以限制事件處理器的執行頻率，從而節省資源並提高性能。

2. API 請求限制
   許多Web API都有請求限制，例如，一個API可能每分鐘只允許發送一定數量的請求。節流可以幫助確保應用程式不會超出這些限制，避免不必要的錯誤和限制。

3. 提高用戶體驗
   節流可以避免應用程式由於過多的計算和渲染而變得無回應，這對於保持流暢的用戶界面和提供良好的用戶體驗至關重要。

4. 資料節約
   對於依賴於網絡的應用，節流能夠減少數據的使用量，這對於有數據限制的用戶或在網絡連接較差的情況下尤其有用。

import { useRef, useEffect, useCallback } from 'react';

function useThrottle(callback, delay) {
    const lastCallRef = useRef(0);
    const functionRef = useRef(callback);

    // 如果callback改變，更新functionRef.current
    useEffect(() => {
        functionRef.current = callback;
    }, [callback]);

    return useCallback((...args) => {
        const now = Date.now();

        if (now - lastCallRef.current >= delay) {
            functionRef.current(...args);
            lastCallRef.current = now;
        }
    }, [delay]);
}

export default useThrottle;

使用方法：

import React, { useState } from 'react';
import useThrottle from './useThrottle';

function App() {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount((prevCount) => prevCount + 1);
    };

    const throttledIncrement = useThrottle(increment, 1000); // 1000毫秒內只能調用一次

    return (
        <div>
            <p>{count}</p>
            <button onClick={throttledIncrement}>Increment</button>
        </div>
    );
}

export default App;